import React, { Component } from 'react'
import { Row, Col, Icon, List, Divider, Badge, Tag } from 'antd'
import moment from 'moment'
import { Link, Redirect } from 'umi'
import Author from '@/components/Author'
import Advert from '@/components/Advert'
import { imageArr } from '@/assets/js/ConstVariable'
import { getArticleByTag } from '@/services/list'
import { getRecommendArticle } from '@/services/common'
import './index.less'

import hljs from 'highlight.js'
import MarkdownIt from 'markdown-it'
import 'highlight.js/styles/atom-one-light.css'

import { history } from 'umi'
import { serverBaseUrl } from '@/assets/js/ConstVariable'
const _ = require('lodash')
const mdParser = MarkdownIt({
  html: true,
  linkify: true,
  typographer: true,
  highlight(str, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return hljs.highlight(lang, str).value
      } catch (__) {}
    }
    return '' // 使用额外的默认转义
  },
})
const friendTags = [
  { color: 'cyan', content: '百度一下', href: 'https://www.baidu.com' },
  { color: 'orange', content: '简书', href: 'https://www.jianshu.com/' },
  { color: 'gold', content: 'Gitee', href: 'https://gitee.com/' },
  { color: 'geekblue', content: '阿里云', href: 'https://www.aliyun.com/' },
  { color: 'purple', content: 'Github', href: 'https://github.com/' },
  { color: 'green', content: '阿里云盘', href: 'https://www.aliyundrive.com/' },
]
const colorStyle = ['#FD8C84', '#7FD75A', '#60C4FD', '#999999']
export default class Home extends Component {
  state = {
    articleList: [],
    hotArticleList: [],
    isLoading: true,
  }
  componentDidMount() {
    this.getAllArticle()
  }
  getAllArticle = async () => {
    const res1 = await getArticleByTag(0)
    const res2 = await getRecommendArticle('view_count', 9)
    this.setState({ articleList: res1?.data, hotArticleList: res2?.data, isLoading: false })
  }

  render() {
    const { articleList, hotArticleList, isLoading } = this.state
    return (
      <>
        {isLoading ? (
          ''
        ) : (
          <div className="list">
            <Row className="comm-main" type="flex" justify="center">
              <Col className="comm-left" xs={24} sm={24} md={14} lg={16} xl={12}>
                {/* 头部图片推荐区域 */}
                <Row className="left-image" type="flex" justify="center">
                  <Col span={12} className="hover" onClick={() => history.push(`/detail/${hotArticleList[0].id}`)}>
                    <img
                      src={
                        hotArticleList[0]?.url?.length
                          ? serverBaseUrl + hotArticleList[0].url
                          : imageArr[~~(Math.random() * 5)]?.href
                      }
                      width="100%"
                      height="100%"
                      alt=""
                    />
                    <div className="mask" style={{ height: '15%' }}>
                      {hotArticleList[0].title}
                    </div>
                  </Col>
                  <Col span={11}>
                    <Row>
                      {imageArr.slice(0, 4).map((item, index) => {
                        return (
                          <Col
                            span={11}
                            className="hover"
                            onClick={() => history.push(`/detail/${hotArticleList[index + 1].id}`)}
                          >
                            <img
                              src={
                                hotArticleList[index + 1]?.url?.length
                                  ? serverBaseUrl + hotArticleList[index + 1].url
                                  : imageArr[~~(Math.random() * 5)]?.href
                              }
                              width="100%"
                              height="100%"
                              alt=""
                            />
                            <div className="mask">{hotArticleList[index + 1].title}</div>
                          </Col>
                        )
                      })}
                    </Row>
                  </Col>
                </Row>

                {/* 文章列表 */}
                <List
                  itemLayout="vertical"
                  dataSource={this.state.articleList}
                  pagination={{
                    pageSize: 5,
                    hideOnSinglePage: true,
                  }}
                  renderItem={(item) => (
                    <List.Item>
                      <Row type="flex" align="middle">
                        <Col span={6}>
                          <img
                            src={item?.url?.length ? serverBaseUrl + item.url : imageArr[~~(Math.random() * 5)]?.href}
                            alt="图片已失效"
                            className="cover"
                          />
                        </Col>
                        <Col span={18}>
                          <Link to={{ pathname: '/detail/' + item.id }}>
                            <div className="list-title">{item.title}</div>
                          </Link>
                          <div className="list-icon">
                            <span style={{ color: 'rgb(84,115,135)' }}>
                              <Icon type="calendar" />{' '}
                              {moment(Number(item.addTime * 1000)).format('YYYY-MM-DD HH:mm:ss')}
                            </span>
                            <span style={{ color: 'orange' }}>
                              <Icon type={item.tagIcon} /> {item.tagName}
                            </span>
                            <span style={{ color: 'tomato' }}>
                              <Icon type="fire" theme="filled" /> {item.viewCount}
                            </span>
                          </div>
                          <div
                            className="list-content"
                            dangerouslySetInnerHTML={{ __html: mdParser.render(item.introduce || '') }}
                          />
                        </Col>
                      </Row>
                    </List.Item>
                  )}
                />
              </Col>
              {/* 右侧私房菜、广告栏、友情链接 */}
              <Col className="comm-right" xs={0} sm={0} md={9} lg={7} xl={6}>
                <article>
                  <header> 我的私房菜 </header>
                  <nav>
                    {hotArticleList.map((item, index) => {
                      return (
                        <Row
                          key={item.id}
                          type="flex"
                          justify="space-between"
                          style={{ color: index < 3 ? colorStyle[index] : colorStyle[3] }}
                          onClick={() => history.push(`/detail/${item.id}`)}
                        >
                          <Col span={14} className="animate-col">
                            <span
                              style={{ backgroundColor: index < 3 ? colorStyle[index] : colorStyle[3], color: '#fff' }}
                            >
                              {index + 1}
                            </span>
                            {item.title}
                          </Col>
                          <Col span={5}>[{moment(item.addTime * 1000).format('MM-DD')}]</Col>
                        </Row>
                      )
                    })}
                  </nav>
                </article>
                <nav className="friend-link">
                  <header>
                    <Icon type="link" />
                    <span>友情链接</span>
                  </header>
                  <main>
                    {friendTags.map((item, index) => {
                      return (
                        <Tag color={item.color} key={index} onClick={() => (window.location.href = item.href)}>
                          <Icon type="link" />
                          &nbsp; {item.content}
                        </Tag>
                      )
                    })}
                  </main>
                </nav>
                <Advert />
              </Col>
            </Row>
          </div>
        )}
      </>
    )
  }
}
